<template>
  <main>
    <van-nav-bar
      title="盘库"
      class="page-nav-bar"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="container">
      <div style="color: black; padding-bottom: 5px; font-weight: bold">
        当前仓库：{{ pankuInfo?.text }}
      </div>
      <el-table
        :data="tableData1"
        border
        id="data-area1"
        @row-click="selectRow"
      >
        <el-table-column prop="productName" label="物料名"></el-table-column>

        <el-table-column prop="productCode" label="产品编号" />
        <el-table-column label="重量">
          <template #default="scope">
            {{ scope.row.weight + scope.row.unit }}
          </template>
        </el-table-column>
      </el-table>

      <div class="btn-area">
        <div @click="onConfirm" :class="{ btnDisabled: isDisabled }">
          <img src="@/assets/image/btn_queren.png" alt="" />
          <div>保存</div>
        </div>
        <div @click="onDelete">
          <img src="@/assets/image/btn_tichu.png" alt="" type="primary" />
          <div>剔除</div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
  import { ref, onMounted } from 'vue'
  import { toRaw } from '@vue/reactivity'
  import { useRouter, useRoute } from 'vue-router'
  import { showNotify, closeNotify } from 'vant'
  import {
    closeToast,
    showFailToast,
    showLoadingToast,
    showToast,
    setToastDefaultOptions,
  } from 'vant'
  import * as chukudanApi from '@/api/chukudan'
  import * as pankuApi from '@/api/panku'

  import { useStore } from 'vuex'
  import fc from 'flutter-core'
  export default {
    setup() {
      setToastDefaultOptions({ duration: 3000 })

      //const router = useRouter()
      const route = useRoute()
      let tableData1 = ref([])
      let isDisabled = ref(false)

      let pankuInfo = ref({})

      const onClickLeft = () => history.back()
      const store = useStore()

      // const testBarcode = [
      //   '2450101230908011100222630',
      //   '2450101230908011100324390',
      //   '2450101230908011100425070',
      //   '2450101230908011100527070',
      //   '2450101230908011100625570',
      //   '2450101230908011100725570',
      // ]

      // 注册扫描后监听返回结果函数
      fc.await('scanner', (res) => {
        showNotify({ message: res })
        processBarCode(res)
      })

      let selectedRow = ''

      const selectRow = (row, column, event) => {
        selectedRow = event.currentTarget.rowIndex
      }

      const onDelete = () => {
        if (selectedRow !== '') {
          tableData1.value.splice(selectedRow, 1)
          selectedRow = ''
        } else {
          showFailToast('请选择要剔除的行！')
        }
      }

      const onConfirm = () => {
        if (tableData1.value.length == 0) {
          showFailToast('没有盘库数据')
          return
        }

        for (let i = 0; i < tableData1.value.length; i++) {
          for (let j = i + 1; j < tableData1.value.length; j++) {
            if (tableData1.value[i].barcode == tableData1.value[j].barcode) {
              showFailToast('有重复提交的数据，请检查后提交！')
              return
            }
          }
        }

        isDisabled.value = true

        let inventoryDetailList = []
        let scanedData = toRaw(tableData1.value)
        for (let i = 0; i < scanedData.length; i++) {
          let inventoryDetail = {}
          inventoryDetail.barcode = scanedData[i].barcode
          inventoryDetail.batchNo = scanedData[i].batchNo

          //inventoryDetail.billId=''
          inventoryDetail.code = scanedData[i].code
          inventoryDetail.id = scanedData[i].id
          inventoryDetail.materialCode = scanedData[i].productCode
          //inventoryDetail.materialId = ''
          inventoryDetail.materialName = scanedData[i].productName
          inventoryDetail.measureUnit = scanedData[i].unit
          inventoryDetail.pkVal = scanedData[i].pkVal
          inventoryDetail.weight = scanedData[i].weight
          inventoryDetailList.push(inventoryDetail)
        }

        showLoadingToast()
        pankuApi
          .savePankuInfo({
            warehouseCode: pankuInfo.value.value,
            warehouseName: pankuInfo.value.text,
            inventoryDetailList: inventoryDetailList,
          })
          .then((res) => {
            if ((res.data.state = true)) {
              tableData1.value = []
              isDisabled.value = false
              showToast({
                message: '操作成功!',
                type: 'success',
                className: 'toast',
                overlay: true,
              })
            } else {
              showFailToast(res.data.message)
            }
          })
      }

      onMounted(() => {
        pankuInfo.value = route.query

        // for (let i = 0; i < testBarcode.length; i++) {
        //   processBarCode(testBarcode[i])
        // }
      })

      const processBarCode = (barcode) => {
        if (barcode) {
          let checkRes = chukudanApi.checkBarcodeIfqualified(barcode.trim())
          if (!checkRes) {
            showFailToast('条形码不符合规范')
            return
          }

          for (let i = 0; i < tableData1.value.length; i++) {
            if (tableData1.value[i].barcode == barcode) {
              showFailToast('该条数据已存在，请勿重复扫码！')
              return
            }
          }
          showLoadingToast('加载中')

          pankuApi.getDetailByBarcode(barcode).then((res) => {
            if (res.data.value === true) {
              showFailToast(res.data.message)
            } else {
              tableData1.value.push(res.data.value)
            }
          })
        }
      }

      return {
        onClickLeft,
        tableData1,
        onConfirm,
        selectRow,
        onDelete,
        isDisabled,
        pankuInfo,
      }
    },
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto !important;
  }
  .container > #data-area1 {
    margin-bottom: 5%;
    flex-grow: 1;
  }

  /** 按钮样式 */

  .btn-area div {
    border-radius: 25px;
    font-size: 16px;
    width: 40%;
    height: 70px;
  }

  .btn-area img {
    top: 5px;
    width: 35px;
  }

  .btn-area > div:nth-child(2) {
    background-color: var(--btn-color2);
  }
  .btn-area > div:nth-child(1) {
    background-color: var(--btn-color1);
  }
  .btn-area > div:nth-child(3) {
    background-color: var(--btn-color1);
  }

  /** */
  ::v-deep(#data-area2 .el-table__cell) {
    background-color: var(--table-body-back-color2);
  }

  ::v-deep(#data-area2 .el-table__cell) {
    border: 1px solid var(--table-body-border-color2);
  }

  .btnDisabled {
    pointer-events: none;
    background-color: gray !important;
  }
</style>
